<template>
	<div class="" id="container1">

		<div id="scroll">
			<div style="background:url(http://lak110.gitee.io/gdapp/src/images/banner2.png);background-size:cover;">
				<div class="status-top"></div>
			</div>
			<ul>
				<mt-cell :title="item.meterNo" v-for="item in ammeterArr">
					<span style="color: #EF4F4F;margin-right: 1.27rem;">{{item.description}}</span>
					<span class="handle" @click="goPage(item)">进行派单</span>
					<span class="iconfont icon-xuanzeqixiayige" style="margin-left: 10px;"></span>
				</mt-cell>
			</ul>
		</div>

    	<div  style="color: #666666;font-size: 0.85rem;text-align: center;" v-if="ammeterArr.length==0">
        <div class="bottom-placehoder"></div>
        暂无数据
        </div>

    <foot-guide></foot-guide>
	</div>
</template>

<script>
	import {
		mapMutations,
		mapActions
	} from 'vuex'
	import footGuide from 'src/components/footer/footGuide'
	import {
		Cell
	} from 'mint-ui';
	export default {
		components: {
			Cell,
			footGuide
		},
		data() {
			return {
				ammeterArr: [],
				pageindex: 1,
				loading: false,
				pageSize: 20,
				totalPageCount: ''
			}
		},
		methods: {
			...mapMutations([
				'setUserType'
			]),
			...mapActions([
				'actionsUserType'
			]),
			Mutations() {
				this.setUserType('直接调用mutations更新状态')
			},
			Actions() {
				this.actionsUserType('actions调用mutations然后在更新状态').then(p => {
					console.log('promice 返回的数据：' + p)
				})
			},
			goPage(item) {
				this.$router.push({
					path: '/forPersonOrder',
					query: item
				})
			},
			getOffAmmeter() {
				this.$axios.post('gdiot/meter/selectMeterWarning', {
					"page": this.pageindex,
					"rows": this.pageSize,
				}).then((p) => {
					this.totalPageCount = Math.ceil(p.data.total / this.pageSize)
					if (this.pageindex <= this.totalPageCount) {
						this.loading = false; //可以加载
						this.pageindex++;
						this.ammeterArr = this.ammeterArr.concat(p.data.rows);
					} else {
						console.log(this.pageindex)
						this.loading = true; //不可以加载
						this.$mint.Toast({
							message: '没有数据啦',
							duration: 1500
						});
					}
				})
			},
			scrollGetMore() {
				//内容实际高度（包括超出视窗的溢出部分）
				var scrollHeight = document.getElementById('scroll').scrollHeight;
				//滚动条滚动距离
				var scrollTop = document.getElementById('container1').scrollTop;
				//盒子可视范围高度
				var clientHeight = document.getElementById('container1').offsetHeight;
				if (clientHeight + scrollTop >= scrollHeight - 15) {
					this.getOffAmmeter();
				}
			}
		},
		created() {
			// eventBus.$on('choiceHospital', (val) => {
			// 	console.log("这个是用transimissiontwo的val值为：" + val)
			// })

			this.getOffAmmeter();
		},
		mounted() {
			document.getElementById('container1').addEventListener('scroll', this.scrollGetMore)
		}
	}
</script>

<style lang="scss" scoped>
	#container1 {
		position: absolute;
		width: 100%;
		height: 100%;
		overflow-y: auto;
		-webkit-overflow-scrolling:touch;
	}

	.status-top {
		height: 2.97rem;
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-image: url(http://lak110.gitee.io/gdapp/src/images/wave.gif);
		mix-blend-mode: screen;
		vertical-align: middle;
	}

	.status-info-con {
		padding: 0.85rem;

		li {
			display: flex;
			align-items: center;
			justify-content: space-around;

		}
	}

	.handle {
		color: #1890FF;
	}
</style>
